<template>
  <div class="common-page">
    <sib-common-page
      ref="pageComponent"
      :permissions="permissions"
      :main-table-config="mainTableConfig"
      :main-dialog-config="mainDialogConfig">
      <template #age="{ row }">
        <span :class="row.age && row.age > 18 && 'is-adult'">{{ row.age }}</span>
      </template>
    </sib-common-page>
  </div>
</template>

<script>

export default {
    name: 'CommonPage',
    data() {
        return {
            permissions: {
                // 查看列表
                view: {
                    url: '/mock-api/findPage.json',
                    method: 'get',
                    params: { id: 10086 },
                    callback: (res) => res.data.data.list,
                },
                export: {
                    url: '/',
                    method: 'post',
                    params: {},
                },
                // 导入列表
                import: {
                    url: '/',
                    method: 'post',
                    params: {},
                },
                // 列表行新增
                add: {
                    url: '/api/add',
                    method: 'post',
                    params: { additionalParam: '666' },
                },
                // 列表行编辑
                edit: {
                    url: '/api/update',
                    method: 'post',
                    params: {},
                },
                // 列表行复制
                copy: {
                    url: '/api/copy',
                    method: 'post',
                    params: {},
                },
                // 列表行删除
                delete: {
                    url: '/api/delete',
                    method: 'post',
                    params: {},
                },
                // 批量删除列表
                batchDelete: {
                    url: '/api/batchDelete',
                    method: 'post',
                    params: {},
                },
            },
            // 主列表查询配置（支持传入 sib-table 组件的所有配置参数）
            mainTableConfig: {
                indexStyle: 'selection',
                isRefresh: true,
                // 列表的列配置项
                tableColumn: [
                    {
                        label: '姓名',
                        code: 'name',
                    },
                    {
                        label: '性别',
                        code: 'sex',
                        formatter: (row) => ({ 1: '男', 2: '女' }[row.sex]),
                    },
                    {
                        label: '年龄',
                        code: 'age',
                        type: 'slot',
                    },
                    {
                        label: '状态',
                        code: 'status',
                        formatter: (row) => ({ 1: '已婚', 0: '未婚' }[row.status]),
                        type: 'button',
                        buttonType: 'warning',
                        size: 'mini',
                        disabled: (row) => row.status === 1,
                        handler: (row) => {
                            const message = row.age > 25 ? `你都${row.age}了，这么大年纪还单身，一定存了不少钱吧？` : '小孩子认真读书！';
                            this.$alert(message, '温馨提示');
                        },
                    },
                    {
                        label: '照片',
                        code: 'avatar',
                        type: 'image',
                    },
                    {
                        label: '操作',
                        code: 'operate',
                        type: 'slot',
                    },
                ],
                selected: ['2'],
                buttonConfig: {
                    add: {
                        name: '新增人员',
                    },
                    import: {
                        name: '导入人员信息',
                        maxSize: 20,
                    },
                    delete: {
                        name: '点击删除',
                        // row: 行数据 index: 行索引
                        disabled: (row, index) => !!(index % 2),
                    },
                },
                /**
                 * 自定义列表行批量删除，如果不自定义的话，将默认使用 permissions.batchDelete 内的接口配置进行批量删除操作
                 * @param {*} rows 勾选的行
                 * @param {*} config 接口配置项
                 * @param {*} cb 刷新列表的回调方法
                 */
                // handlerBatchDeleteRows: (rows, config, cb) => {
                //     this.$confirm(`确定删除这${rows.length}条数据吗？`, '温馨提示', {
                //         type: 'warning',
                //         confirmButtonText: '确定删除',
                //     }).then(() => {
                //         console.log(rows, config, cb);
                //     });
                // },
            },
            // 主列表的新增、修改、复制弹窗表单配置
            mainDialogConfig: {
                width: '400px',
                addItemInfo: [
                    {
                        label: '姓名',
                        code: 'name',
                        type: 'text',
                        required: true,
                    },
                    {
                        label: '性别',
                        code: 'sex',
                        type: 'select',
                        // 若设置了 required: true，需指定options内的选项数据的value类型
                        validateType: 'number',
                        options: [
                            {
                                key: 1,
                                value: '男',
                            },
                            {
                                key: 2,
                                value: '女',
                            },
                        ],
                        required: true,
                    },
                    {
                        label: '年龄',
                        code: 'age',
                        type: 'number',
                        min: 0,
                        required: true,
                    },
                ],
                editItemInfo: [
                    {
                        label: '姓名',
                        code: 'name',
                        type: 'label',
                    },
                    {
                        label: '性别',
                        code: 'sex',
                        type: 'select',
                        options: [
                            {
                                key: 1,
                                value: '男',
                            },
                            {
                                key: 2,
                                value: '女',
                            },
                        ],
                        disabled: true,
                    },
                    {
                        label: '年龄',
                        code: 'age',
                        type: 'number',
                        min: 0,
                        required: true,
                    },
                ],
                // 点击复制时，若未配置表单项，默认会使用addItemInfo
                // copyItemInfo: [],
                // 提交表单前的回调，支持修改form数据
                beforeSubmit: ({ form }) => {
                    console.log('表单数据', form);
                    return { ...form, type: 666 };
                },
            },
        };
    },
};
</script>

<style lang="scss">
@import "@/assets/styles/scss/theme.scss";

.common-page {
    .is-adult {
        color: $theme;
        font-weight: 600;
        font-size: 16px;
    }
}
</style>
